<template>
    <div ref="list" class="list-box" @scroll="scrollEvent($event)">
        <div class="list-visual" :style="{height:listHeight+'px'}"></div>
        <ul class="list-ul" :style="{ transform: getTransform }">
            <li class="list-li">
                <div v-for="(item, index) in visibleData" :key="index" :style="{width:100/size-1.2+'%', height:height+'px'}" class="cardBox">
                    <Card @click.native="changePage(item.id)" class="card" :class=" item.use_status == 0 ? 'space':item. use_status ==1 ? 'have' : 'not'">
                        <div class="title" slot="title">
                            <img v-if="item.work_type == 1" :src="flag1" alt="">
                            {{item.number}}
                        </div>
                        <p class="status" slot="extra"> {{item.use_status_zw}} </p>

                        <main>
                            <p class="c_name"> {{ item.company_name }} </p>
                            <p>位置：{{item.branch_zw + item.floor_zw}} </p>
                            <p>办公类型：{{item.work_type_zw}} </p>
                            <p>价格：{{item.price}} </p>
                            <p>使用率: {{ item.use_rate +'%'}} </p>

                            <div class="expire" v-if="item.use_status == 0 || (item.rest_day > 0 && item.rest_day <= 30)">
                                <p> {{ item.use_status == 0 ? '空置':'剩余' }} </p>
                                <span> {{ item.use_status == 0 ? item.vacant_day: item.rest_day }}天 </span>
                                <img :src=" flag3" alt="">
                            </div>
                        </main>
                    </Card>
                </div>
            </li>
        </ul>
    </div>

</template>

<script>
    export default {
        name: 'listRender',
        props: {
            // 列表数据
            listData: {
                type: Array,
                default: () => [],
            },
            // 每项高度
            height: {
                type: Number,
                default: 200
            },
            // 每行个数
            size: {
                type: Number,
                default: 7
            }
        },
        data() {
            return {
                flag1: require('@/assets/images/flag1.png'),
                flag3: require('@/assets/images/flag3.png'),

                // 可视区域高度
                screenHeight: 0,
                //偏移量
                startOffset: 0,
                //起始索引
                start: 0,
                //结束索引
                end: null,
            }
        },

        methods: {
            scrollEvent(e) {
                let scrollTop = this.$refs.list.scrollTop
                // 此时开始的索引
                this.start = Math.floor(scrollTop / this.height) * this.size
                //此时的结束索引
                this.end = this.start + this.visibleCount;
                //此时的偏移量
                this.startOffset = scrollTop - (scrollTop % (this.height + 20));

            },
            changePage(id) {
                this.$emit('changePage', id)
            }
        },
        computed: {
            // 可视的数据条数    可视区域高度 / 每一行高度 * 每行条数
            visibleCount() {
                return Math.ceil(this.screenHeight / this.height) * this.size
            },
            // 列表总高度       所有数据 / 每行条数 * 每一项高度
            listHeight() {
                return Math.ceil(this.listData.length / this.size) * this.height
            },
            //偏移量对应的style
            getTransform() {
                return `translate3d(0,${this.startOffset}px,0)`;
            },
            // 可视的真实数据
            visibleData() {
                return this.listData.slice(this.start, Math.min(this.end, this.listData.length))
            }
        },
        mounted() {
            this.screenHeight = this.$el.clientHeight
            this.end = this.start + this.visibleCount
        }

    }
</script>

<style lang='less' scoped>
    .list-box {
        width: 100%;
        height: 570px;
        overflow: auto;
        position: relative;

        // &::-webkit-scrollbar {
        //     // display: none;
        // }
    }

    .list-visual {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: -1;
    }

    .list-ul {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }

    .list-li {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        // margin-top: 20px;

        // border-bottom: 1px solid #999;
    }

    .cardBox {
        // min-width: 200px;
        margin-bottom: 20px;
        margin-right: 1.2%;
    }

    .card {

        background-color: #2BDE73;
        color: #fff;
        width: 100%;
        height: 100%;

        .title {
            position: relative;
            height: 20px;
            text-align: center;
            line-height: 20px;

            img {
                width: 36px;
                height: 36px;
                position: absolute;
                top: -10px;
                left: 0;
            }
        }

        main {
            // position: relative;
            font-size: 12px;
            cursor: pointer;

            .c_name {
                margin-bottom: 10px;
            }

            .expire {
                width: 70px;
                height: 70px;
                position: absolute;
                bottom: 0;
                right: 0;

                img {
                    width: 70px;
                    height: 70px;
                }

                p {
                    position: absolute;
                    right: 2px;
                    bottom: 26px;
                }

                span {
                    position: absolute;
                    right: 4px;
                    bottom: 3px;
                    font-size: 16px;

                }
            }
        }
    }

    .space {
        background-color: #2A7EFB;
    }

    .not {
        background-color: #FF9905;
    }
</style>